import vue from '@vitejs/plugin-vue'
import path from 'path'
import { defineConfig, loadEnv } from 'vite'
import { injectHtml } from 'vite-plugin-html'
import styleImport, { VantResolve } from 'vite-plugin-style-import'
import eslintPlugin from 'vite-plugin-eslint'
import { viteMockServe } from 'vite-plugin-mock'

// 获取环境变量
const config = loadEnv('development', './')

export default defineConfig({
  base: config.VITE_APP_BASE_URL,
  plugins: [
    vue(),
    // 注入参数到html配置
    injectHtml({
      data: {
        title: config.VITE_APP_TITLE
      }
    }),
    // 按需引入 vant 配置
    styleImport({
      resolves: [VantResolve()]
    }),
    // eslint 相关配置
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.ts'],
      cache: false
    }),
    // mock.js 相关配置
    viteMockServe({
      mockPath: './src/mock',
      localEnabled: true, // 开发打包开关
      prodEnabled: false, // 生产打包开关
      supportTs: true, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
      watchFiles: true // 监视文件更改
    })
  ],
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  server: {
    // 开启ip访问
    host: '0.0.0.0',
    // 反向代理
    proxy: {
      // mock接口
      [`${config.VITE_APP_REQUEST_URL}/mock`]: {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: path => path.replace(new RegExp(`^${config.VITE_APP_REQUEST_URL}/mock/`), '')
      },
      [config.VITE_APP_REQUEST_URL]: config.VITE_APP_BASE_API
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 注入scss
        additionalData: `
          @import "@/styles/global-var.scss";
          @import "@/styles/mixin.scss";
        `
      }
    }
  }
})
